:host ::ng-deep .ant-tabs-tab {
  padding: 12px 8px !important;
  text-align: center;
}

:host ::ng-deep .ant-tabs-tabpane {
  padding-right: 24px;
  padding-top: 16px;
}

.inner-box {
  padding: 8px 0;
  opacity: 1;
  cursor: move;
  height: 102px;
  position: relative;
  margin-bottom: 10px;
  width: 100%;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 2px solid hsla(0, 0%, 62%, 0.24);
  transition: border 0.3s;
}

.left-panel {
  transition: 0.5s ease-in-out;
  position: fixed;
  width: 340px;
  overflow: hidden;
  z-index: 10000;
  box-shadow: none;
  height: 100%;
  padding: 0 0 10px 10px;
  display: inline-block;
  background-color: #fff;

  .component-list {
    height: 100%;
    padding-bottom: 76px;
  }

  .drag-start {
    cursor: pointer;
  }
}

.right-design {
  overflow: hidden;
  height: 100vh;
  position: relative;
  flex: 1 1;
  background-image: radial-gradient(rgba(9, 89, 194, 0.3) 6%, transparent 0), radial-gradient(#faf9f8 6%, transparent 0);
  background-size: 10px 10px;
  background-position:
    0 0,
    2px 2px;
  cursor: -webkit-grab !important;
  cursor: grab !important;
  background-color: red;
  z-index: 1000;
  left: 340px;
}

.drag-over {
  border: #ff525b dashed 2px;
}

.drag-hint {
  border: #ffc100 dashed 2px;
}

.drag-target-border {
  border: #00bfff dashed 2px;
}

.drag-target-border-green {
  border: #3c763d dashed 2px;
}

.preview-container {
  z-index: 199;
}

.horizontal-resize-snap-helper,
.vertical-resize-snap-helper,
.north-drag-snap-helper,
.south-drag-snap-helper,
.east-drag-snap-helper,
.west-drag-snap-helper {
  position: absolute;
  border: 0;
  border-style: dotted;
  border-color: black;
  z-index: 999;
}

.horizontal-resize-snap-helper,
.north-drag-snap-helper,
.south-drag-snap-helper {
  width: 100%;
  border-top-width: 2px;
}

.vertical-resize-snap-helper,
.east-drag-snap-helper,
.west-drag-snap-helper {
  height: 100%;
  border-left-width: 2px;
}

.hide {
  display: none;
}

.fade {
  opacity: 0;
}

.ui-draggable-dragging {
  position: absolute !important;
}

.serial-chart {
  background-image: url(../../../../../../public/imgs/serial-chart.svg);
  background-repeat: no-repeat;
  width: 100px;
}

.word-cloud {
  background-image: url(../../../../../../public/imgs/word-cloud.svg);
  background-repeat: no-repeat;
}
